import React, { Component } from 'react'
import { Layout, Button, messages } from 'antd';
const { Content } = Layout;
const constraints = window.constraints = {
    audio: false,
    video: true
}
let video = {}
export default class P3_open_canvas extends Component {
    componentDidMount() {
        video = this.refs['video'];
        navigator.mediaDevices.getUserMedia(constraints).then(
            this.handleSuccess
        ).catch(
            this.handleError
        )
    }
    handleSuccess = (stream) => {
        video.srcObject = stream
    }
    handleError = (error) => {
        console.log('getUserMedia error:', error)
    }
    takeSnap = async (e) => {

        let canvas = this.refs['canvas'];
        canvas.width = video.videoWidth
        canvas.height = video.videoHeight
        canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
    }
    render() {
        return (
            <div>
                <Content
                    className="site-layout-background"
                    style={{
                        padding: 24,
                        margin: 0,
                        minHeight: 700,
                    }}>
                    <video ref="video" weight="300" height="300" playsInline autoPlay></video><br /><br />
                    <canvas ref='canvas' weight="400" height="400"></canvas><br />
                    <Button onClick={this.takeSnap}>截屏</Button>
                </Content>
            </div>
        )
    }
}
